<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #nav {
            z-index: 4;
            position: fixed;
            top: 0;
            right: 0;
            width: 380px;
            height: 100%;
            font-size: 32px;
            text-align: center;
            
        }

        #nav .menu {
            display: block;
            z-index: 5;
            width: 100%;
            height: 75px;
            background-color: #E47E7E;
            text-align: center;
            border: none; 
            outline: none;
        }

        #nav .menu i {
            display: inline-block;
            height: 75px;
            width: 75px;
            text-align: right;
            line-height: 75px;
            font-size: 20px;
            color: #fff;
        }

        #nav .nav-list {
            display: none;
            padding-top: 40px;
            padding-right: 85px;
            text-align: right;
            background-color: rgba(52, 85, 138, 0.5);
            height: 100%;
        }

        #nav .nav-list>li {
            margin-bottom: 15px;
        }

        #nav .nav-list>li:last-of-type {
            margin-bottom: 0;
        }

        #nav .nav-list>li a {
            position: relative;
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #fff;
            font-size: 18px;
        }

        #nav .nav-list>li a:hover,
        #nav .nav-list>li a.active {
            color: #f0c18f;
        }

        #nav .nav-list>li a:hover:after,
        #nav .nav-list>li a.active:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -85px;
            width: 60px;
            height: 2px;
            background-color: #f0c18f;
            margin-top: -1px;
        }

        #nav .nav-list>li>a>span {
            display: block;
        }

        #nav .nav-list>li>a>span:first-of-type {
            font-size: 18px;
        }

        #nav .nav-list>li>a>span:last-of-type {
            font-size: 12px;
            text-transform: capitalize;
        }

        #nav .nav-list>li ul {
            display: none;
        }

        #nav .nav-list>li ul li a {
            display: block;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <nav id="nav" role="navigation">
        <button type="button" class="menu" id="menu" title="展开/关闭菜单">展开/关闭菜单</button>


        <ul class="nav-list" id="navList">
            <li class="nav-item">
                <a href="##" title="首页" class="active">
                            <span>首页</span>
                            <span>Home page</span>
                        </a>
            </li>
            <li class="nav-item">
                <a href="##" title="行业应用">
                            <span>行业应用</span>
                            <span>Industry application</span>
                        </a>
                <ul>
                    <li>
                        <a href="##health" title="公共卫生">【公共卫生】智慧健康管理方案</a>
                    </li>
                    <li>
                        <a href="##aged" title="居家养老">【居家养老】智慧健康管理方案</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0)" title="关于早寻" class="">
                            <span>关于早寻</span>
                            <span>About foresight</span>
                        </a>
            </li>
            <li class="nav-item">
                <a href="##" title="HCC日常健康管理体系">
                            <span>HCC日常健康管理体系</span>
                            <span>HEALTH CONTEXT CLOUD</span>
                        </a>
            </li>
            <li class="nav-item">
                <a href="##" title="联系我们">
                            <span>联系我们</span>
                            <span>Contact us</span>
                        </a>
            </li>
        </ul>
    </nav>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        //显示和关闭导航
        $("#menu").on("click", function (e) {
            $("#navList").slideToggle(400);
            $(document).on("click", function () {
                $("#navList").slideUp(400);
            });
            e.stopPropagation();
        });
        $("#navList").on("click", function (e) {
            e.stopPropagation();
        });
        $("#navList").on("click","a" ,function (e) {
            e.stopPropagation();
            $("#navList a").removeClass("active");
            $(this).addClass("active");
        });
    </script>
</body>

</html>